<div id="card-div" class="col-md-3">
  <div class="card text-center">
    <div class="card-body">
      {{#if couldNotAcquireToken}}
        <h5 class="card-title">Could not acquire token silently. Please double check your configuration</h5>
      {{else }}
        <h5 class="card-title">Welcome, {{username}}, you have signed in successfully!</h5>
      {{/if}}

      {{#if noAccounts}}
        <h5 class="card-title">No accounts found in the cache.</h5>
      {{/if}}

      {{#if failedToGetAccounts}}
        <h5 class="card-title">Failed to get accounts from cache.</h5>
      {{/if}}
      <br>
      <a class="btn btn-primary" href="/silentAcquireToken" id="acquireTokenSilent">Acquire a Token</a>
      <br>
      <a class="btn btn-primary" href="/graphCall" id="callGraph">See Profile</a>
      <br>
      <a class="btn btn-primary" href="/allAccounts" id="getAllAccounts">Get All Accounts</a>
  </div>
  </div>
</div>
<br>
<br>
<div class="col-md-4">
  <div class="list-group" id="list-tab" role="tablist">
  </div>
</div>
<div class="col-md-5">
  <div class="tab-content" id="nav-tabContent">
    {{#if acquiredTokenSilently}}
      <pre id="token-acquired-silently">Silent token acquisition successful</pre>
    {{/if}}
    {{#if profile}}
      <pre id="graph-called-successfully">{{profile}}</pre>
    {{/if}}
    {{#if accounts}}
      <pre id="accounts-retrieved-successfully">{{accounts}}</pre>
    {{/if}}
  </div>
</div>
